<template>
  <div class="container">
    <nav-bar class="nav-bar">
      <van-icon
        name="ellipsis"
        color="#999"
        size="18"
      />
      <template
        v-if="headerInfoVisible"
        #title
      >
        <div class="avatar-mini">
          <img :src="articleDetail.aut_photo">
        </div>
        <span class="name-mini">{{ articleDetail.aut_name }}</span>
        <span class="follow-mini">关注</span>
      </template>
    </nav-bar>

    <!-- 容器 -->
    <section
      ref="section"
      @scroll="onScroll"
    >
      <!-- 头部部分 -->
      <header ref="header">
        <h2>{{ articleDetail.title }}</h2>
        <div class="time-wrapper">
          <span>{{ getDate(articleDetail.pubdate) }}</span>
          <span>{{ articleDetail.read_count }} 阅读</span>
          <span>{{ articleDetail.comm_count }} 评论</span>
        </div>
        <div class="author-info">
          <div class="avatar">
            <img :src="articleDetail.aut_photo">
          </div>
          <div class="name">{{ articleDetail.aut_name }}</div>
          <van-button
            class="follow"
            color="#fc662c"
            size="small"
            round
          >
            + 关注
          </van-button>
        </div>
      </header>

      <main>
        <div v-html="articleDetail.content" />
        <p class="pub-date">发布文章时间：{{ getDate(articleDetail.pubdate) }}</p>
      </main>

      <!-- 评论 -->
      <footer>
        <van-sticky :offset-top="46">
          <div class="title">
            <span>全部评论({{ articleCommentList.total_count }})</span>
            <span>{{ articleDetail.like_count }}点赞</span>
          </div>
        </van-sticky>
        <div class="comment-list">
          <div
            v-for="comment in articleCommentList.results"
            class="comment"
            :key="comment.com_id"
          >
            <div class="avatar">
              <img :src="comment.aut_photo">
            </div>
            <div>
              <div class="username">{{ comment.aut_name }}</div>
              <div class="content">{{ comment.content }}</div>
              <div>
                <van-button
                  class="reply"
                  color="#e9e9e9"
                  size="mini"
                  round
                >
                  回复
                  <van-icon name="arrow" />
                </van-button>
                <span class="time">{{ getTime(comment.pubdate) }}</span>
              </div>
            </div>
            <div class="like">
              {{ comment.like_count }}
              <!--
                点赞等于0 显示thumb-circle-o
                点赞大于0 显示good-job-o
                自己点赞 高亮good-job-o
               -->
              <van-icon
                :name="comment.like_count ? 'good-job-o' : 'thumb-circle-o'"
                :color="comment.is_liking ? '#fc662c' : undefined"
              />
            </div>
          </div>
        </div>
      </footer>
    </section>

    <!-- 底部 -->
    <van-goods-action>
      <van-search
        placeholder="抢沙发..."
        left-icon="edit"
        shape="round"
        @click.native="onCommentPopup"
      />
      <!-- 弹窗 -->
      <van-popup
        v-model="show"
        position="bottom"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        get-container="body"
        :style="{ height: '100%' }"
      >
        <div class="comments">
          评论文章
          <p class="send">发表</p>
        </div>
      </van-popup>
      <van-goods-action-icon
        icon="chat-o"
        text="评论"
        :badge="articleDetail.comm_count"
        @click="onComment"
      />
      <van-goods-action-icon
        icon="good-job-o"
        text="点赞"
        @click="onLike"
      />
      <van-goods-action-icon
        icon="like-o"
        text="收藏"
        @click="onCollect"
      />
      <van-goods-action-icon
        icon="share-o"
        text="分享"
        @click="onShare"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import moment from 'moment';

let h = 0;

export default {
  name: 'ArticleDetail',
  data() {
    return {
      // 顶部是否显示
      headerInfoVisible: false,
      // 评论内容
      commentInpValue: '',
      // 弹窗是否弹出
      show: false,
    };
  },
  computed: {
    ...mapState('article', [
      'articleDetail',
    ]),
    ...mapState('comment', [
      'articleCommentList',
    ]),
  },
  methods: {
    ...mapActions('article', [
      'updateArticleDetail',
    ]),
    ...mapActions('comment', [
      'updateArticleCommentList',
    ]),
    getDate(timestamp) {
      return moment(timestamp).format('YYYY年MM月DD日');
    },
    onScroll() {
      this.headerInfoVisible = this.$refs.section.scrollTop > h;
    },
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },
    // 评论
    onComment() {

    },
    // 点赞
    onLike() {

    },
    // 收藏
    onCollect() {

    },
    // 分享
    onShare() {

    },
    // 抢沙发的弹窗
    onCommentPopup() {
      this.show = true;
    },
  },
  async created() {
    const { id } = this.$route.params;
    this.updateArticleCommentList(id);
    // 等待请求完成
    await this.updateArticleDetail(id);
    // 等待数据+DOM更新完成
    this.$nextTick(() => {
      const { clientHeight, offsetTop } = this.$refs.header;
      h = clientHeight + offsetTop - 46;
    });
  },
}
</script>

<style src="highlight.js/styles/atom-one-dark.css"></style>
<style lang="less" scoped>
@import url("@/assets/styles/common.less");
@gap: 16px;
@bg-color: #fff;

.container {
  background: #aaa;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .avatar-mini {
    .avatar(10px);
  }

  .nav-bar span {
    margin-left: 8px;
    font-weight: 600;
  }

  .follow-mini {
    color: #fc662c;

    &::before {
      content: '';
      display: inline-block;
      height: 10px;
      width: 1px;
      background: #aaa;
      margin-right: 8px;
    }
  }
}
section {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  background: #f5f5f5;
  margin-bottom: 50px;

  .avatar {
    .avatar(18.5px);
  }

  header {
    background: @bg-color;
    padding: @gap;

    h2 {
      font-weight: normal;
    }

    .time-wrapper {

      span {
        display: inline-block;
        font-size: 12px;
        color: #666;
        line-height: 1em;
        border-right: 1px solid #666;
        padding-right: 8px;
        margin-right: 8px;

        &:last-child {
          border: none;
        }
      }
    }

    .author-info {
      display: flex;
      width: 100%;
      align-items: center;
      padding: @gap 0;
      border-bottom: 1px solid #f5f5f5;

      .name {
        flex: 1;
        font-size: 18px;
        margin: 0 16px;
      }

      .follow {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }

  main {
    padding: @gap;
    background: @bg-color;

    .pub-date {
      text-align: right;
      color: #aaa;
      font-size: 14px;
    }
  }

  footer {
    margin-top: @gap;
    background: @bg-color;

    .title {
      padding: @gap;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;
      background: @bg-color;

      span:last-child {
        font-size: 14px;
        color: #aaa;
      }
    }

    .comment-list {
      padding: 0 @gap;

      .comment {
        padding: @gap 0;
        display: flex;

        >div:nth-child(2) {
          flex: 1;
          margin: 0 @gap;

          .content {
            color: #999;
            margin: @gap 0;
          }

          .reply {
            color: #666 !important;
            padding-left: 8px;
            padding-right: 8px;
            margin-right: @gap;
          }

          .time {
            color: #aaa;
            font-size: 12px;
            font-weight: normal;
          }

          &>:last-child {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

}

::v-deep .van-info {
  background: #fc662c;
}

::v-deep .van-icon:before {
  color: #333;
  font-size: 14px;
}
.comments {
  position: relative;
  width: 100%;
  padding: 18px 0;
  text-align: center;
  font-weight: 200;
  border-bottom: 1px solid #f5f5f5;

  .send {
    position: absolute;
    color: #fc662c;
    font-weight: 400;
    font-size: 13px;
    top: 8px;
    right: 16px;
  }
}
</style>
